<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <!-- <script type="text/javascript" src="../../Public_Html/Header/Header.js"></script> -->
    <!--引入swiper样式-->
    <link rel="stylesheet" href="../../css/Untils/swiper-bundle.min.css">
    <link rel="stylesheet" href="../../css/Untils/public.css">
    <script src="//unpkg.com/vue@2/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.15.10/lib/index.js"></script>
    <title>首页</title>
</head>

<body>
    <div id="app">
        <header class="flex header_font" style="width: 100%;">
            <div class="margin-left_logo">
                <a href="" style=" margin-right: 40px;">
                    <img src="//img3.tuniucdn.com/u/mainpic/logo/logo_20170124.png" title="途牛网" class="logo">
                </a>
            </div>

            <!--菜单模块-->
            <div id="navitems">
                <ul id="navitems_groups">
                    <li><a href="javascript:void(0)">首页</a></li>
                    <li><a href="javascript:void(0)">跟团游</a></li>
                    <li><a href="javascript:void(0)">自行游</a></li>
                    <li><a href="javascript:void(0)">酒+景</a></li>
                    <li><a href="javascript:void(0)" @click="skipToHotel">酒店</a></li>
                    <li><a href="javascript:void(0)">门票</a></li>
                    <li><a href="javascript:void(0)">定制游</a></li>
                    <li><a href="javascript:void(0)">攻略</a></li>
                    <li><a href="javascript:void(0)" @click="skipToCustomerServer">客服</a></li>
                    <li><a href="javascript:void(0)" @click="skipToCustomer">个人中心</a></li>
                </ul>
            </div>

            <!--登录注册-->
            <div class="flex">
                <div class="flex" v-if="isLogin" style="margin-top: 12px;">
                    <i class="el-icon-user-solid" style="margin-top: 2px;"></i>
                    <div>{{admin.userNickName}}</div>
                    <div style="margin-left: 20px;" @click="signOut">
                        <a href="javascript:void(0)" style="color: white;">退出登录</a>
                    </div>
                </div>
                <div v-if="!isLogin" class="flex" style="margin-top: 12px;">
                    <div class="margin-left" style="width: 60px;">
                        <a href="../../html/admin/admin.html" class="header_font" style="color: white;">
                            登录
                        </a>
                    </div>
                    <div class="margin-left" style="width: 60px;">
                        <a href="../../html/register/register.html" style="color: white;">
                            注册
                        </a>
                    </div>
                </div>
            </div>
        </header>
        <div class="small_title">
            <div class="wrap">
                <div>
                    万家灯火，总有一盏灯为你而亮。
                    旅马全体员工愿意为您竭诚服务！
                </div>
                <div style="margin-left: 290px;">
                    <!--搜索框1-->
                    <div class="search_key1">
                        <div class="center padding-body search_float">
                            <div class="flex">
                                <div class="serach_body flex">
                                    <div class="search_div1 flex" @click="closeCity">
                                        <div
                                            style="width: 15px;height:18px;margin-left: 20px;margin-top: 2px;margin-right: -16px;">
                                            <img src="../../img/logo/address.png" style="width: 15px;height:18px">
                                        </div>
                                        <input type="text" class="search" placeholder="请选择城市" v-model="city">
                                        <div v-if="isShowForm" class="selectCity">
                                            <div class="single"></div>
                                            <div class="flex_wrap">
                                                <div class="flex margin-left_select">
                                                    江苏省
                                                </div>

                                                <div class="city flex flex_around margin-left_select">
                                                    <div v-for="(item,i) in cityArr" id="city_arr">
                                                        <div class="flex_wrap">
                                                            <!--城市-->
                                                            <div id="city_arr">
                                                                <ul>
                                                                    <li>
                                                                        <a href="javascript:void(0)"
                                                                            @click="selectCity($event)">{{item.cityName}}</a>
                                                                    </li>
                                                                </ul>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="search_div2 flex">
                                        <div class="block">
                                            <el-date-picker
                                                style="border-top: none;border-bottom: none;border-radius: 0;margin-bottom: 2px;"
                                                v-model="date" type="daterange" range-separator="至"
                                                start-placeholder="入住日期" end-placeholder="退房日期">
                                            </el-date-picker>
                                        </div>
                                    </div>

                                    <div class="search_div1 flex">
                                        <div
                                            style="width: 18px;height:16px;margin-left: 20px;margin-top: 2px;margin-right: -16px;">
                                            <img src="../../img/logo/search.png" style="width: 18px;height:16px">
                                        </div>
                                        <input type="text" class="search" placeholder="关键字搜索" v-model="txt">
                                    </div>
                                </div>
                                <div class="" @click="searchBtn">
                                    <div class="searchBtn" role="button"><i class="el-icon-search"></i>搜索酒店</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--搜索框2-->
        <div class="search_key2">
            <div class="center padding-body search_float2">
                <div class="flex">
                    <div class="serach_body flex">
                        <div class="search_div1 flex" @click="closeCity2">
                            <div style="width: 15px;height:18px;margin-left: 20px;margin-top: 2px;margin-right: -16px;">
                                <img src="../../img/logo/address.png" style="width: 15px;height:18px;margin-top: 10px;">
                            </div>
                            <input type="text" class="search" placeholder="请选择城市" v-model="city">
                            <div v-if="isShowFormXF" class="selectCity" style="top:100px">
                                <div class="single"></div>
                                <div class="flex_wrap">
                                    <div class="flex margin-left_select">
                                        江苏省
                                    </div>

                                    <div class="city flex flex_around margin-left_select">
                                        <div v-for="(item,i) in cityArr" id="city_arr">
                                            <div class="flex_wrap">
                                                <!--城市-->
                                                <div id="city_arr">
                                                    <ul>
                                                        <li>
                                                            <a href="javascript:void(0)"
                                                                @click="selectCity($event)">{{item.cityName}}</a>
                                                        </li>
                                                    </ul>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="search_div2 flex">
                            <div class="block">
                                <el-date-picker
                                    style="border-top: none;border-bottom: none;border-radius: 0;margin-bottom: 2px;"
                                    v-model="date" type="daterange" range-separator="至" start-placeholder="入住日期"
                                    end-placeholder="退房日期">
                                </el-date-picker>
                            </div>
                        </div>

                        <div class="search_div1 flex">
                            <div style="width: 18px;height:16px;margin-left: 20px;margin-top: 2px;margin-right: -16px;">
                                <img src="../../img/logo/search.png" style="width: 18px;height:16px;margin-top: 10px;">
                            </div>
                            <input type="text" class="searchTest" id="searchStr" placeholder="关键字搜索">
                        </div>
                    </div>
                    <div class="" @click="searchBtn">
                        <div class="searchBtn" role="button"><i class="el-icon-search"></i>搜索酒店</div>
                    </div>
                </div>
            </div>
        </div>

        <!--下半部分主题-->
        <div class="flex between swiper_body">
            <div class="warp">
                <div class="swiper_title">
                    活动推荐
                </div>
                <div class="demo flex">
                    <div class="demo1 flex">
                        <div class="swiper mySwiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <img src="https://s.tuniu.net/qn/images/ddd9ea338968e8f639529ada7ff0e646.png"
                                        alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="https://m.tuniucdn.com/fb3/s1/2n9c/3aKXrjyjRJBgZr1DEKHeC8q3dNid_w200_h200_c1_t0_w360_h200_c1_t0.jpg"
                                        alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="https://m.tuniucdn.com/fb3/s1/2n9c/3nHKrJFtBvZBeq38NBiy43syJMDy_w200_h200_c1_t0_w360_h200_c1_t0.jpg"
                                        alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="https://m.tuniucdn.com/fb3/s1/2n9c/2BtymicKsnepa8bkY9Wrkov4b8gM_w200_h200_c1_t0_w360_h200_c1_t0.jpg"
                                        alt="">
                                </div>
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="warp">
                <div class="swiper_title flex" style="margin-left: 40px;">
                    酒店热销榜
                    <div class="jian_bot">
                        <img src="../../img/logo/jian_bot.png" class="hot_jian">
                    </div>
                </div>
                <!-- <div class="swiper hotListHotel"> -->
                <div class="hotListHotel" style="margin-top: 20px;">
                    <div id="hot_hotel" class="swiper-wrapper" style="display: flex;">
                        <div class="swiper-slide">
                            <ul>
                                <li class="flex flex_between" v-for="(item,i) in rankList" v-if="i < 3"
                                    @click="jumpDetails(item.hotelId)">
                                    <div class="first">{{i+1}}</div>
                                    <div class="wrap">
                                        <div class="flex">
                                            <div class="wrap" style="margin-top: 6px;">
                                                <div class="second">
                                                    {{(item.hotelName).length > 6 ? (item.hotelName).substring(0,6) + "...": item.hotelName }}
                                                </div>
                                                <div class="thread" style="margin-right: 50px;">{{item.hotelDowntown}}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex flex_between">
                                            <div class="flex" style="margin-right: 60px;">
                                                <div class="four">{{item.hotelMark}}</div>
                                                <!--需要跟筛选页面统一-->
                                                <div class="five">{{item.hotelMark > 4 ? "超棒!" : "一般!"}}</div>
                                            </div>
                                            <div class="flex">
                                                <div class="money">￥</div>
                                                <div class="money_num">{{item.roomLeastPrice}}</div>
                                                <div class="money_qi">起</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="hot_hotel_img_box">
                                        <img class="hot_hotel_img" :src="item.hotelShowImg">
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <!-- <div class="swiper-slide">
                            <ul>
                                <li class="flex flex_around" v-for="(item,i) in hotelArr" v-if="i > 2 && i < 6">
                                    <div class="first">{{i+1}}</div>
                                    <div class="wrap">
                                        <div class="flex">
                                            <div class="wrap" style="margin-top: 6px;">
                                                <div class="second">
                                                    {{(item.hotelName).length > 6 ? (item.hotelName).substring(0,6) + "...": item.hotelName }}
                                                </div>
                                                <div class="thread">{{item.hotelDowntown}}</div>
                                            </div>
                                        </div>
                                        <div class="flex between">
                                            <div class="flex">
                                                <div class="four">{{item.hotelMark}}</div>
                                                <div class="five">{{item.hotelMark > 4 ? "超棒!" : "一般!"}}</div>
                                            </div>
                                            <div class="flex">
                                                <div class="money">￥</div>
                                                <div class="money_num">{{item.hotelPrice}}</div>
                                                <div class="money_qi">起</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="hot_hotel_img_box">
                                        <img class="hot_hotel_img" :src="item.hotelImg">
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="swiper-slide">
                            <ul>
                                <li class="flex flex_around" v-for="(item,i) in hotelArr" v-if="i>5 && i<9">
                                    <div class="first">{{i+1}}</div>
                                    <div class="wrap">
                                        <div class="flex">
                                            <div class="wrap" style="margin-top: 6px;">
                                                <div class="second">
                                                    {{(item.hotelName).length > 6 ? (item.hotelName).substring(0,6) + "...": item.hotelName }}
                                                </div>
                                                <div class="thread">{{item.hotelDowntown}}</div>
                                            </div>
                                        </div>
                                        <div class="flex between">
                                            <div class="flex">
                                                <div class="four">{{item.hotelMark}}</div>
                                                <div class="five">{{item.hotelMark > 4 ? "超棒!" : "一般!"}}</div>
                                            </div>
                                            <div class="flex">
                                                <div class="money">￥</div>
                                                <div class="money_num">{{item.hotelPrice}}</div>
                                                <div class="money_qi">起</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="hot_hotel_img_box">
                                        <img class="hot_hotel_img" :src="item.hotelImg">
                                    </div>
                                </li>
                            </ul>
                        </div> -->
                    </div>
                    <div class="swiper-pagination"></div>

                </div>
            </div>
        </div>

        <!--秒杀模块-->
        <div class="warp swiper_body">
            <div class="swiper_title">秒杀专区</div>
            <div class="flex bwtween margin-top">
                <div class="active_spilk header_font">
                    <div class="wrap">
                        <div class="active_style">
                            距离活动开始
                        </div>
                        <div class="flex margin-top spilk_time">
                            <div class="timer">
                                {{time}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="margin-left2 flex">
                    <ul id="spilck_ul" :class="[isStartActivity ? '':'cursor']">
                        <li v-for="(item,i) in conponsArr" :key="i" @click="conponSpilk(i)">
                            <div class="tricket flex between">
                                <div
                                    :class="[item.couponSnapupStatus != 0?'flex tricket_head tricket_head_qiang':'flex tricket_head tricket_head_common']">
                                    <div class="tricket_head_price" style="margin-left: 15px;">
                                        {{item.couponDiscount}}
                                    </div>
                                    <div class="tricket_head_price_zhe">折</div>
                                    <!-- <div class="tricket_head_price_zhe">{{item.couponName == "折扣券"?"折":"元"}}</div> -->
                                </div>
                                <div class="flex tricket_body between">
                                    <div class="wrap">
                                        <div class="tricket_name">
                                            {{item.couponName}}
                                        </div>
                                        <div class="tricket_body_date">
                                            {{item.couponStartDate}}
                                        </div>
                                    </div>
                                    <div
                                        :class="[item.couponSnapupStatus != 0 ? 'ticket_spilck_qiang ticket_spilck_qianged' : 'ticket_spilck_qiang ticket_spilck_noqiang']">
                                        <a href="javascript:void(0)">{{item.couponSnapupStatus == 0?"抢购":"已抢购"}}</a>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="jian">
                        <a href="javascript:void(0)">
                            <img src="../../img/logo/jian_right.png" style="width: 16px;height:16px">
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!--夏日好玩去处-->
        <div class="hotel_thim">
            <div class="wrap">
                <div class="swiper_title">
                    酒店星推荐
                </div>
                <div id="hotel_tipoc">
                    <div class="good_recommend">
                        <div class="swiper recommendSwiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide hotel_xing" style="background-image: url(https://m.tuniucdn.com/fb2/t1/G6/M00/45/E0/Cii-U13Zj4eIbUTxAATK72z3DncAAFqqgCxkeEABMsH305_w200_h200_c1_t0_w360_h200_c1_t0.jpg);
                            background-size: 100% 100%;height: 140px;">
                                    <a href="javascript:void(0)">
                                        <div class="bg_color2">
                                            <div class="flex_wrap">
                                                <div style="font-size: 22px;font-weight:600">苏州吴江汾湖亚朵酒店</div>
                                                <div class="warp"
                                                    style="font-size: 16px;font-weight:bolder;margin-top:30px">
                                                    <div style="margin-bottom:10px">酒店星级:5</div>
                                                    <div style="margin-bottom:10px">评分:4.9</div>
                                                    <div>地址:芦莘大道777号</div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                                <div class="swiper-slide hotel_xing" style="background-image: url(https://m.tuniucdn.com/fb3/s1/2n9c/3aKXrjyjRJBgZr1DEKHeC8q3dNid_w200_h200_c1_t0_w360_h200_c1_t0.jpg);
                            background-size: 100% 100%;height: 140px;">
                                    <a href="javascript:void(0)">
                                        <div class="bg_color2">
                                            <div class="flex_wrap">
                                                <div style="font-size: 22px;font-weight:600">苏州古运河英迪格酒店</div>
                                                <div class="warp"
                                                    style="font-size: 16px;font-weight:bolder;margin-top:30px">
                                                    <div style="margin-bottom:10px">酒店星级:5</div>
                                                    <div style="margin-bottom:10px">评分:4.8</div>
                                                    <div>地址:虎丘区苏州新区／寒山寺</div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                                <div class="swiper-slide hotel_xing" style="background-image: url(https://m.tuniucdn.com/fb2/t1/G6/M00/02/2C/Cii-U12jo-yIRUleAADNT4gLWToAAAbnANXg9EAAM1n220_w200_h200_c1_t0_w360_h200_c1_t0.jpg);
                            background-size: 100% 100%;height: 140px;">
                                    <a href="javascript:void(0)">
                                        <div class="bg_color2">
                                            <div class="flex_wrap">
                                                <div style="font-size: 22px;font-weight:600">苏州金鸡湖安榭度假酒店</div>
                                                <div class="warp"
                                                    style="font-size: 16px;font-weight:bolder;margin-top:30px">
                                                    <div style="margin-bottom:10px">酒店星级:4</div>
                                                    <div style="margin-bottom:10px">评分:4.8</div>
                                                    <div>地址:观前街/平江路/十全街/市中心</div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                                <div class="swiper-slide hotel_xing" style="background-image: url(https://m.tuniucdn.com/fb2/t1/G6/M00/45/E0/Cii-U13ZkfSILxdTAATTYKlMiZ4AAFqvwFZkMUABNN4335_w200_h200_c1_t0_w360_h200_c1_t0.jpg);
                            background-size: 100% 100%;height: 140px;">
                                    <a href="javascript:void(0)">
                                        <div class="bg_color2">
                                            <div class="flex_wrap">
                                                <div style="font-size: 22px;font-weight:600;">苏州中惠铂尔曼酒店</div>
                                                <div class="warp"
                                                    style="font-size: 16px;font-weight:bolder;margin-top:30px">
                                                    <div style="margin-bottom:10px">酒店星级:5</div>
                                                    <div style="margin-bottom:10px">评分:4.7</div>
                                                    <div>地址:相城高铁新城开发区／苏州北站</div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                                <div class="swiper-slide hotel_xing" style="background-image: url(https://m.tuniucdn.com/fb3/s1/2n9c/DH6jopV52YSKB2CiXUtLCGTUkTY_w200_h200_c1_t0_w360_h200_c1_t0.jpghttps://m.tuniucdn.com/fb3/s1/2n9c/DH6jopV52YSKB2CiXUtLCGTUkTY_w200_h200_c1_t0_w360_h200_c1_t0.jpg);
                            background-size: 100% 100%;height: 140px;">
                                    <a href="javascript:void(0)">
                                        <div class="bg_color2">
                                            <div class="flex_wrap">
                                                <div style="font-size: 22px;font-weight:600">苏州观前街亚朵酒店</div>
                                                <div class="warp"
                                                    style="font-size: 16px;font-weight:bolder;margin-top:30px">
                                                    <div style="margin-bottom:10px">酒店星级:4</div>
                                                    <div style="margin-bottom:10px">评分:4.5</div>
                                                    <div>地址:观前街/平江路/十全街/市中心</div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--精选主题住宿-->
        <div class="hotel_thim">
            <div class="wrap">
                <div class="swiper_title">
                    精选主题住宿
                </div>
                <div id="hotel_tipoc">
                    <ul id="hotle_tipoc_ul" class="flex">
                        <li>
                            <!--网红民宿-->
                            <a href="javascript:void(0)">
                                <div class="hotel_bg hotel_bg_img1">
                                    <div class="wrap">
                                        <div class="hotel_bg_title">
                                            网红民宿>
                                        </div>
                                        <div class="hotel_bg_text">
                                            住有温度的民宿
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <!--亲子酒店-->
                            <a href="javascript:void(0)">
                                <div class="hotel_bg hotel_bg_img2">
                                    <div class="wrap">
                                        <div class="hotel_bg_title">
                                            亲子酒店>
                                        </div>
                                        <div class="hotel_bg_text">
                                            让宝贝玩得尽兴，睡得舒心
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <!--花样青旅-->
                            <a href="javascript:void(0)">
                                <div class="hotel_bg hotel_bg_img3">
                                    <div class="wrap">
                                        <div class="hotel_bg_title">
                                            花样青旅>
                                        </div>
                                        <div class="hotel_bg_text">
                                            来一场说走就走的旅行
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <!--古镇酒店-->
                            <a href="javascript:void(0)">
                                <div class="hotel_bg hotel_bg_img4">
                                    <div class="wrap">
                                        <div class="hotel_bg_title">
                                            古镇酒店>
                                        </div>
                                        <div class="hotel_bg_text">
                                            在古镇发现前世的自己
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!--品牌旗舰店-->
        <div id="pimc_body">
            <div class="wrap">
                <div class="swiper_title">品牌旗舰店</div>
                <div class="margin-top2 flex between">
                    <!--金昌小田旅游文化宣传中心-->
                    <a id="pimc_logo" href="javascript:void(0)">
                        <div class="pimc pimc_bg1">
                            <div class="bg_color">
                                <div>全球度假村，一价享精彩</div>
                            </div>
                        </div>
                    </a>
                    <!--复星旅文-->
                    <a id="pimc_logo" href="javascript:void(0)">
                        <div class="pimc pimc_bg2">
                            <div class="bg_color">
                                <div>复兴旅文</div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <!--合作品牌-->
        <div id="pimc_body">
            <div class="wrap">
                <div class="swiper_title">
                    合作品牌
                </div>
                <div class="cooperation">
                    <ul class="flex space">
                        <li>
                            <a href="javascript:void(0)">
                                <img
                                    src="https://m3.tuniucdn.com/fb2/t1/G6/M00/00/CA/Cii-U12gVTiIAggEAAAlmo1PkUgAAAKEQGqxBcAACWy515.png">
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">
                                <img
                                    src="https://m2.tuniucdn.com/fb2/t1/G6/M00/00/CA/Cii-TF2gVTqICr8MAAAQXjSoO8sAAAKEAP_50cAABB2471.png">
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">
                                <img
                                    src="https://m1.tuniucdn.com/fb2/t1/G6/M00/00/CA/Cii-TF2gVTmIKGtUAAA0SHfakcoAAAKEQGyuxEAADRg884.png">
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">
                                <img
                                    src="https://m3.tuniucdn.com/fb2/t1/G6/M00/00/CA/Cii-U12gVTiIJLhqAABHUxpcROAAAAKEQGvUO0AAEdr391.png">
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0)">
                                <img
                                    src="https://m4.tuniucdn.com/fb2/t1/G6/M00/00/CA/Cii-U12gVTmIW3uiAAAZr6LlqoQAAAKEQGy73EAABnH805.png">
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">
                                <img
                                    src="https://m.tuniucdn.com/fb2/t1/G6/M00/00/CA/Cii-U12gVTmIWyQGAAAxSLvM0TwAAAKEQGvv_sAADFg111.png">
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">
                                <img
                                    src="https://m3.tuniucdn.com/fb2/t1/G6/M00/00/CA/Cii-TF2gVTiICK0PAABGEvl7RNoAAAKEQGqfe0AAEYq389.png">
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">
                                <img
                                    src="https://m1.tuniucdn.com/fb2/t1/G6/M00/00/CA/Cii-U12gVTiIDmD5AABHEZQvmz8AAAKEQGuB-EAAEcp009.png">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!--底部-->
        <footer>
            <div class="footer_body">
                <ul class="flex space">
                    <li>
                        <div class="wrap">
                            <div class="footer_logo">
                                <div class="footer_img">
                                    <img src="../../img/logo/travel.png">
                                </div>
                                <div class="footer_font">去旅游</div>
                            </div>
                            <div class="footer_bot_body">
                                <div class="flex space">
                                    <div class="wrap">
                                        <div class="footer_li_text">跟团游</div>
                                        <div class="footer_li_text">自由行</div>
                                        <div class="footer_li_text">酒+景</div>
                                        <div class="footer_li_text">公司旅游</div>
                                        <div class="footer_li_text">当地活动</div>
                                        <div class="footer_li_text">首付出发</div>
                                    </div>
                                    <div class="wrap">
                                        <div class="footer_li_text">牛人专线</div>
                                        <div class="footer_li_text">亲子游</div>
                                        <div class="footer_li_text">蜜月游</div>
                                        <div class="footer_li_text">海岛游</div>
                                        <div class="footer_li_text">乐于推荐</div>
                                        <div class="footer_li_text">旅拍</div>
                                    </div>
                                    <div class="wrap">
                                        <div class="footer_li_text">酒店</div>
                                        <div class="footer_li_text">门票</div>
                                        <div class="footer_li_text">邮轮</div>
                                        <div class="footer_li_text">签证</div>
                                        <div class="footer_li_text">机票</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="wrap">
                            <div class="footer_logo">
                                <div class="footer_img">
                                    <img src="../../img/logo/coupon.png" style="margin-top: 6px;">
                                </div>
                                <div class="footer_font">寻优惠</div>
                            </div>
                            <div class="footer_bot_body" style="margin-left: 20px;">
                                <div class="wrap">
                                    <div class="footer_li_text">特卖</div>
                                    <div class="footer_li_text">订酒店 返现金</div>
                                    <div class="footer_li_text">积分商城</div>
                                    <div class="footer_li_text">银行特惠游</div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="wrap">
                            <div class="footer_logo">
                                <div class="footer_img">
                                    <img src="../../img/logo/Strategy.png" style="margin-top: 4px;">
                                </div>
                                <div class="footer_font">看攻略</div>
                            </div>
                            <div class="footer_bot_body" style="margin-left: 20px;">
                                <div class="wrap">
                                    <div class="footer_li_text">攻略</div>
                                    <div class="footer_li_text">途牛风向标</div>
                                    <div class="footer_li_text">游记</div>
                                    <div class="footer_li_text">达人玩法</div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="wrap">
                            <div class="footer_logo">
                                <div class="footer_img">
                                    <img src="../../img/logo/service.png" style="margin-top: 4px;">
                                </div>
                                <div class="footer_font">查服务</div>
                            </div>
                            <div class="footer_bot_body" style="margin-left: 20px;">
                                <div class="wrap">
                                    <div class="footer_li_text">帮助中心</div>
                                    <div class="footer_li_text">会员俱乐部</div>
                                    <div class="footer_li_text">阳光保障</div>
                                    <div class="footer_li_text">火车时刻表</div>
                                    <div class="footer_li_text">航班查询</div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="wrap">
                            <div class="footer_logo">
                                <div class="footer_img">
                                    <img src="../../img/logo/app.png" style="margin-top: 4px;">
                                </div>
                                <div class="footer_font">APP</div>
                            </div>
                            <div class="footer_bot_body" style="margin-left: 20px;">
                                <div class="wrap">
                                    <div class="footer_li_text">扫描下载途牛APP</div>
                                    <div class="canvas">
                                        <img src="../../img/logo/code.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <!--最底部-->
            <div class="footer_bot">
                <div class="flex">
                    <div class="zhuzhu">
                        <img src="../../img/logo/footer/plane.png" class="footer_bot_img">
                    </div>
                    <div class="footer_text">阳光行程</div>
                </div>
                <div class="flex">
                    <div class="zhuzhu">
                        <img src="../../img/logo/footer/pig.png" class="footer_bot_img">
                    </div>
                    <div class="footer_text">阳光价格</div>
                </div>
                <div class="flex">
                    <div class="zhuzhu">
                        <img src="../../img/logo/footer/head.png" class="footer_bot_img">
                    </div>
                    <div class="footer_text">阳光服务</div>
                </div>
                <div class="flex">
                    <div class="zhuzhu">
                        <img src="../../img/logo/footer/telephone.png" class="footer_bot_img">
                    </div>
                    <div class="footer_text">售后服务</div>
                </div>
            </div>
        </footer>
        <div style="display: none;">
            <!-- websocket弹窗 -->
            <el-button plain @click="open2">
            </el-button>
        </div>

        <!-- <div v-for="(rank,i) in rankList">{{rank}}</div> -->
    </div>
    <script src="../../js/untils/axios-0.18.0.js"></script>
    <!--引用vue-->
    <script src="../../js/untils/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../../js/untils/moment.js"></script>
    <!--vue-->
    <script>
        new Vue({
            el: "#app",
            // 数据
            data() {
                return {
                    // 用户信息
                    admin: {},
                    isLogin: false, // 登录状态
                    // 倒计时
                    endTime: '', // 活动开始前时间
                    spickTime: '', // 秒杀时间为5秒
                    time: '', // 定时器
                    hours: '', // 时
                    minutes: '', // 分
                    seconds: '', // 秒
                    flag: false,
                    isSpilk: false, // 是否被抢购
                    txt: '',
                    rankList: [], //酒店排行榜数据
                    monitor: 0, // 页面滚动的高度(监听器)
                    city: '', // 搜索框选择的城市
                    isShowForm: false, // 是否展示城市选择框
                    isShowFormXF: false, // 悬浮框的城市选择框
                    isStartActivity: false, // 秒杀活动是否开始
                    couponWebsocketMsg: "", //WebSocket服务端返回的信息

                    // 城市数组
                    cityArr: [{
                            cityid: 1,
                            cityName: "南京",
                        },
                        {
                            cityid: 2,
                            cityName: "苏州",
                        },
                        {
                            cityid: 3,
                            cityName: "无锡",
                        },
                        {
                            cityid: 4,
                            cityName: "南通",
                        },
                        {
                            cityid: 5,
                            cityName: "常州",
                        },
                        {
                            cityid: 6,
                            cityName: "泰州",
                        },
                        {
                            cityid: 7,
                            cityName: "扬州",
                        },
                        {
                            cityid: 8,
                            cityName: "徐州",
                        },
                        {
                            cityid: 9,
                            cityName: "盐城",
                        },
                        {
                            cityid: 10,
                            cityName: "镇江",
                        },
                        {
                            cityid: 11,
                            cityName: "淮安",
                        },
                        {
                            cityid: 12,
                            cityName: "连云港",
                        },
                        {
                            cityid: 13,
                            cityName: "宿迁",
                        }
                    ],
                    date: '', // 日期

                    // 优惠券数据
                    conponsArr: [],
                    coupon: {}, // 优惠券
                    // count:0
                    isUserOwnerCoupon:false, // 用户是否已拥有该优惠券
                }
            },

            // 方法
            methods: {

                //websocket消息弹窗
                open2() {
                    console.log("正在执行")
                    this.$notify({
                        title: '您有一条新消息',
                        message: this.couponWebsocketMsg,
                        position: 'bottom-right'
                    });
                    var Ctor = Vue.extend(Main)
                    new Ctor().$mount('#app')
                },
                
                // 是否关闭城市选项
                closeCity() {
                    if (this.isShowForm) {
                        this.isShowForm = false;
                        this.monitor = window.pageYOffset;
                        console.log(this.monitor)
                    } else {
                        this.isShowForm = true;
                    }
                },

                // 是否关闭悬浮搜选框城市选项
                closeCity2() {
                    if (this.isShowFormXF) this.isShowFormXF = false;
                    else this.isShowFormXF = true;
                },

                // 选择城市
                selectCity(e) {
                    this.city = e.currentTarget.innerHTML
                },

                // 搜索按钮
                searchBtn() {
                    //清空缓存
                    localStorage.clear();
                    if (this.admin != null) {
                        localStorage.setItem("admin", JSON.stringify(this.admin))
                        localStorage.setItem("searchTxt", JSON.stringify(this.txt))
                        console.log("需要发送给下一个页面的数据")
                        console.log(JSON.stringify(this.admin))
                        console.log(JSON.stringify(this.txt))
                    }
                    window.location.href = "../screen/screen.html"
                    console.log(this.admin)
                    let phone = this.admin.userPhone
                    localStorage.setItem(phone, JSON.stringify(this.admin))
                    //搜索框的文本内容
                    localStorage.setItem("searchTxt", JSON.stringify(this.txt))
                    window.location.href = "../screen/screen.html?phone=" + phone
                },

                // 秒杀开始前倒计时
                timeDown() {
                    // debugger
                    var endTime = new Date(this.endTime);
                    var nowTime = new Date();
                    var timeDiffence = (endTime - nowTime) / 1000
                    let h = this.formate(parseInt(timeDiffence / (60 * 60)));
                    var lastTime = timeDiffence % (60 * 60);
                    let m = this.formate(parseInt(lastTime / 60));
                    let s = this.formate(parseInt(lastTime % 60));

                    if (timeDiffence <= 0) {
                        this.flag = true;
                        this.$emit('time-end');
                        this.time = "00:00:00";
                        this.isStartActivity = true;

                    } else {
                        this.time = `${h}:${m}:${s}`;
                    }
                },

                // 秒杀倒计时中
                startSpickTime() {
                    console.log("秒杀进行中...")
                },

                // 获取当日优惠券
                getTodayCouponList() {
                    var that = this
                    axios({
                        method: 'get',
                        url: 'http://localhost:8080/couponStock/getTodayCouponList'
                    }).then(function (resp) {
                        console.log("当日优惠券：" + resp.data.data)
                        that.conponsArr = resp.data.data
                        if (that.conponsArr.length == 0) alert("优惠券以为空")
                        that.isOwnerCoupon()
                    })
                },

                // 优惠券秒杀
                seckilCoupon(coupon, userAdmin) {
                    var that = this
                    axios({
                        method: 'post',
                        url: 'http://localhost:8080/hotel/delaySeckilCoupon' + "?userAdmin=" +
                            userAdmin,
                        data: coupon
                    }).then(function (resp) {
                        console.log(resp.data)
                    })
                },

                // 时间格式转换
                formate(time) {
                    if (time >= 10) {
                        return time;
                    } else {
                        return `0${time}`;
                    }
                },

                // 抢购按钮
                conponSpilk(i) {
                    var that = this
                    // 活动是否开始
                    if (that.isStartActivity) {
                        // 判断当前用户是否已拥有该优惠券
                        if (that.isUserOwnerCoupon) {
                            alert("您已有该优惠券!")
                            return
                        }

                        that.conponsArr[i].couponSnapupStatus = 1
                        // 获取当前系统时间
                        var currentTime = new Date()
                        // console.log(moment(currentTime).formate("yyyy-MM-dd HH:mm:ss"))
                        var receiveTime = currentTime.getFullYear() + "-" + (that.formate(currentTime.getMonth() + 1)) + "-" +
                            that.formate(currentTime.getDate()) + " " + that.formate(currentTime.getHours()) + ":" + that.formate(currentTime
                            .getMinutes()) + ":" + that.formate(currentTime.getSeconds())
                        console.log(receiveTime)
                        var coupon = {
                            couponNo: that.conponsArr[i].couponNo,
                            couponSeckilStatus: 1,
                            couponUseStatus: 0,
                            invalidTime: that.conponsArr[i].couponEndDate,
                            receiveTime: receiveTime,
                            stock: 1,
                            stockId: 0,
                            stockNo: "",
                            userAdmin: "",
                            userId: 0
                        }
                        console.log(coupon)
                        that.seckilCoupon(coupon, that.admin.userAdmin)
                    } else {
                        that.conponsArr[i].couponSnapupStatus = 0
                        alert("活动还未开始!")
                        return
                    }
                },

                // 判断该用户是否已抢购当日优惠券
                isOwnerCoupon() {
                    var that = this
                    console.log(that.coupon)
                    axios({
                        method:'get',
                        url:'http://localhost:8080/hotel/isOwnerCoupon'+'?userAdmin='+that.admin.userAdmin+'&couponNo='+that.conponsArr[0].couponNo
                    }).then(function(resp){
                        console.log("是否有该优惠券"+resp.data.data)
                        if (resp.data.data) that.isUserOwnerCoupon = true
                        else that.isUserOwnerCoupon = false
                        
                    })
                },

                // 每天18:00:00开始活动
                setSeckilTime() {
                    var that = this
                    var currentTime = new Date()
                    that.endTime = currentTime.getFullYear() + "-" + (that.formate(currentTime.getMonth() + 1)) + "-" +
                            that.formate(currentTime.getDate()) + " 10:33:00"
                },

                // 检验token是否失效
                checkToken() {
                    var that = this
                    if (that.admin != null) {
                        console.log("token:" + that.admin.token)
                        axios({
                            url: "http://localhost:8080/customerUser/checkToken",
                            method: "get",
                            headers: {
                                'Content-Type': "application/json;charset=UTF-8",
                                //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
                                'token': that.admin.token
                            }
                        }).then(function (resp) {
                            console.log(resp.data.data)
                            // 如果token失效就跳转到登录页面
                            if (!resp.data.data) {
                                alert("token失效")
                                window.location.href = "../admin/admin.html"
                            }
                        })
                    }
                },

                // <!-- websocket提醒用户优惠劵将要过期 -->
                selectCouponWebSocket() {
                    console.log("正在执行...")
                    var ws;
                    var that = this;
                    let userId = this.admin.userId
                    let token = this.admin.token
                    //检测浏览器是否支持webSocket
                    if ("WebSocket" in window) {
                        console.log("您的浏览器支持webSocket!");
                        //模拟产生clientID
                        let clientID = Math.ceil(Math.random() * 100);
                        //创建 WebSocket 对象,注意请求路径！！！！
                        ws = new WebSocket("ws://localhost:8080/testWebSocket/" + userId);

                        //与服务端建立连接时触发
                        ws.onopen = function () {
                            console.log("<p>与服务端建立连接建立成功！您的客户端ID=" + userId + "</p>");
                            console.log(token)
                        }

                        //接收到服务端消息时触发
                        ws.onmessage = function (evt) {
                            console.log(userId)
                            let received_msg = evt.data;
                            console.log("客户端收到消息:" + received_msg)
                            if (received_msg) {
                                let message = received_msg.split("-")[0]
                                let userIdNew = JSON.stringify(received_msg.split("-")[1])
                                userIdNew = parseInt(JSON.parse(userIdNew))
                                if (userId == userIdNew) {
                                    console.log("即时发送websocket...")
                                    that.couponWebsocketMsg = message
                                    that.open2()
                                } else {
                                    console.log("用户未登录，存入redis")
                                    //发送请求将消息存入redis当中
                                    console.log(userIdNew)
                                    console.log(message)
                                    axios({
                                        method: "POST",
                                        data: {
                                            "userId": JSON.stringify(userIdNew),
                                            "message": JSON.stringify(message)
                                        },
                                        url: "http://localhost:8080/customerUserCoupon/saveWebSocketRedis",
                                    }).then(function (resp) {
                                        console.log(resp.data)
                                    })
                                }
                            } else {
                                console.log("不存在返回信息")
                            }
                        };

                        //服务端关闭连接时触发
                        ws.onclose = function () {
                            console.error("连接已经关闭.....")
                        };
                        
                    } else {
                        console.log("您的浏览器不支持webSocket！");
                    }
                },
                mysqlToES() {
                    console.log("同步es中....")
                    axios({
                        method: "get",
                        url: "http://localhost:8080/hotelList/mysqlSynchroElasticSearch"
                    })
                },
                rank() {
                    this.rankList = []
                    var that = this
                    console.log("热数据排行正在查询中...")
                    axios({
                        method: "get",
                        url: "http://localhost:8080/hotelIndex/rankingList"
                    }).then(function (resp) {
                        console.log("请求发送成功...")
                        for (let i = 0; i < resp.data.length; i++) {
                            // console.log(JSON.stringify(resp.data[i]))
                            that.rankList.push(resp.data[i])
                        }
                        // console.log(this.rankList)
                    })
                },
                jumpDetails(hotelId) {
                    var that = this
                    console.log("页面跳转执行中...")
                    console.log(this.admin)
                    // console.log(hotelId)
                    if (this.admin != null) {
                        let phone = this.admin.userPhone
                        if (this.admin != null) {
                            localStorage.setItem(phone, JSON.stringify(this.admin))
                        }
                        location.href = "../screen/details/details.html?phone=" + phone + "&hotelId=" + hotelId
                    } else {
                        location.href = "../screen/details/details.html?hotelId=" + hotelId
                    }

                    // location.href = "../screen/details/details.html"
                },


                // timer: function () { //写成timer()也可
                //     this.getorderdata();
                //     console.log("time") //打印查看效果
                // },
                // getorderdata() { //想要定时执行的函数
                //     var that = this
                //     that.checkToken()
                // }

                // 跳转到个人中心页面
                skipToCustomer() {
                    var that = this
                    if (that.admin != null) window.location.href =
                        "../../html/customer/center_index.html?userId=" + that.admin.userId
                    else window.location.href = "../../html/customer/center_index.html"
                },

                // 跳转到酒店筛选页面
                skipToHotel() {
                    var that = this
                    if (that.admin != null) window.location.href = "../../html/screen/screen.html?userAdmin=" +
                        that.admin.userAdmin
                    else window.location.href = "../../html/screen/screen.html"
                },

                // 跳转到客服页面
                skipToCustomerServer() {
                    var that = this
                    if (that.admin != null) window.location.href =
                        "../../html/coupon/customer_service/chatting.html?userAdmin=" + that.admin.userAdmin
                    else window.location.href = "../../html/coupon/customer_service/chatting.html"

                },

                // 退出登录
                signOut() {
                    // 清空缓存
                    window.localStorage.clear()
                    // 清空用户信息
                    this.admin = {}
                    this.isLogin = false
                    // 跳转到登录页面
                    // window.location.href = "../admin/admin.html"
                },

                //获取存储在redis当中的websocket未读取信息 重新加载到websocket进行推送
                getRedisWebSocket() {
                    var that = this
                    console.log("redis读取重新进入websocket")
                    console.log(this.admin.userId)
                    axios({
                        method: "GET",
                        url: "http://localhost:8080/customerUserCoupon/getRedisToWebSocket/" + this
                            .admin.userId
                    }).then(function (resp) {
                        that.selectCouponWebSocket()
                    })
                },

            },

            // 钩子函数
            created() {
                
            },

            // 一般在初始化页面完成后,再对dom节点进行相关操作
            mounted() {
                var that = this
                let time = setInterval(() => {
                    if (that.flag == true) {
                        clearInterval(time); // 清空定时器
                        that.startSpickTime();
                    }
                    that.timeDown(); // 调用计时器
                }, 1000); // 每1秒调用一次

                // debugger
                // 取出缓存中的用户数据
                var url = decodeURI(window.location.href);
                var phone = url.split("?phone=")[1]
                console.log("本地缓存:" + window.localStorage.getItem(phone))
                that.admin = JSON.parse(window.localStorage.getItem(phone))
                if (that.admin != null) {
                    console.log("用户信息" + that.admin)
                    this.isLogin = true
                    alert("欢迎登录旅马酒店！尊敬的" + that.admin.userNickName + "先生!")
                } else this.isLogin = false

                // setInterval(this.timer, 1000);
                //mysql同步es当中
                console.log("正常运行代码...")
                that.mysqlToES()
                that.rank()
                // <!-- websocket提醒用户优惠劵将要过期 -->
                that.selectCouponWebSocket();
                that.checkToken()
                that.setSeckilTime()
                that.getTodayCouponList() // 执行获取当日优惠券
                that.getRedisWebSocket() //获取存储在redis当中的websocket未读取信息
            },

        })
    </script>
</body>
<!--引用Jquery_UI-->
<script src="../../js/untils/jquery.min.js"></script>
<!--引入swiper轮播插件-->
<script src="../../js/untils/swiper-bundle.min.js"></script>
<script>
    // 活动推荐轮播
    var swiper = new Swiper(".mySwiper", {
        autoplay: true, // 自动切换
        delay: 2000, // 两秒间隔
        // 分页
        pagination: {
            el: ".swiper-pagination",
            dynamicBullets: true,
        },
    });

    // 酒店热销榜
    // var hothotelSwiper = new Swiper(".hotListHotel", {
    //     direction: "horizontal",
    //     // loop: true,
    //     pagination: {
    //         el: ".swiper-pagination",
    //         dynamicBullets: true,
    //     },
    // });

    // 好玩去处推荐
    var recommendSwiper = new Swiper(".recommendSwiper", {
        autoplay: true, // 自动切换
        delay: 3000, // 3秒间隔
        effect: 'coverflow',
        // loop: true,
        slidesPerView: 3,
        centeredSlides: true,
        coverflowEffect: {
            rotate: 30,
            stretch: 10,
            depth: 60,
            modifier: 2,
            slideShadows: true
        },
    })
</script>
<!--顶部导航栏展示-->
<script type="text/javascript">
    $(function () {
        $(".search_key2").hide();
        $(window).scroll(function () {
            if ($(document).scrollTop() >= 230) {
                $(".search_key2").addClass(".search_key2").slideDown(); // 展示
            } else {
                $(".search_key2").hide(); // 隐藏
            }
        })
    })
</script>

</html>